<template>
  <div class="div">
    <Row>
      <i-col span="24" align="right">
        <Button size="small" type="primary" @click="again()" v-has=tRole.EMAIL_2_101>再发一封</Button>
      </i-col>
    </Row>
    <Row style="margin-top: 1rem">
      <i-col span="24" style="font-size: 12px;" align="right">
        <KeyValueView title="发送员工">{{employeeName}}</KeyValueView>
        <KeyValueView title="发件邮箱">{{senderEmail}}</KeyValueView>
        <KeyValueView title="收件邮箱">{{virtualName}}</KeyValueView>
        <KeyValueView title="时间">{{$tiyBJTime(new Date(createTime).getTime())}}</KeyValueView>
      </i-col>
    </Row>
    <Row style="margin-top: 0.8rem">
      <i-col span="24" style="font-size: 13px;" align="left">
        <span>历史邮件：</span>
        <a @click="showHistory" ><Badge :count="historyCount" class-name="demo-badge-alone"></Badge></a>
        <Tag color="red" v-if="result">查询历史邮件失败</Tag>
      </i-col>
    </Row>
    <divider></divider>
    <div>
      <span class="base_key">邮件标题：</span>
      <span class="base_value">
        {{subject}}
      </span>
    </div>

    <div style="margin-top: 0.5rem">
      <p class="base_key">邮件正文：</p>
      <div class="ql-editor content" @click="proxyImage" v-html="content" ></div>
    </div>
    <div  v-if="attachmentShow" >
      <Divider orientation="left">{{attachmentCount}}</Divider>
      <Row>
        <i-col v-if="isImg(item.suffix)" v-for="item in attachment" :key="item.id" class="demo-upload-list">
          <img :src="item.fileUrl"  ></img>
          <div class="demo-upload-list-cover" @click="showImage(item.fileUrl)">
            <p><span>{{item.fileName}}({{item.fileSize}})</span></p>
            <div style="position: absolute;bottom:0px;right:8px;">
              <Tooltip content="下载" placement="top">
                <Icon type="md-download" @click.stop="download(item.fileUrl,item.fileName)"></Icon>
              </Tooltip>
              <Tooltip content="预览" placement="top">
               <Icon type="ios-eye-outline" @click.stop="showImage(item.fileUrl)"></Icon>
              </Tooltip>
            </div>
          </div>
        </i-col>
      </Row>
      <Row v-if="!isImg(item.suffix)" v-for="item in attachment" :key="item.id" class="file-list">
          <span>{{item.fileName}}</span> <span style="color: #a687a9;margin-right: 1rem;">({{item.fileSize}})</span>
         <a href="javascript:void(0)" @click.stop="download(item.fileUrl,item.fileName)">下载</a>
      </Row>
    </div>

    <Modal
      v-model="status.historyEmail.isShow"
      title="历史往来邮件"
      width="65"
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <history-email :sys-email="sysEmail" ref="HistoryEmail"></history-email>
    </Modal>

    <!-- 图片 -->
    <Modal
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 450px" /></div>
    </Modal>

  </div>
</template>

<!--javascript 代码-->
<script>

import tiyData from "./js/sendEmailDetail/detail_data"
import {createDownloadForm} from "../js/downloadUtils";
import actionUrls from "../../api/ApiUrls";
import HistoryEmail from "./HistoryEmail";
import KeyValueView from "../widgets/KeyValueView";


export default {
  data(){
    return {
      tRole:{
          EMAIL_2_101:"EMAIL-2-101"
      },
      email:tiyData.tData.emailDetail,
      status:tiyData.tStatus,
      historyCount:0,
      result:false,

    }
  },
  components:{KeyValueView, HistoryEmail},
  props:{
    id:'',
    employeeName:'',
    senderEmail:"",
    virtualName:'',
    createTime:"",
    subject:"",
    content:"",
    attachment:Array,
    attachmentShow:'',
    attachmentCount:"",
    sysEmail:Number,
  },
  methods: {
    isImg(suffix){
      return [
        '.png', '.jpg', '.jpeg', '.bmp', '.gif', '.webp', '.psd', '.svg', '.tiff'].indexOf(suffix.toLowerCase()) !== -1;
    },
    proxyImage: function (e) {
      if (e.target.tagName.toUpperCase() === 'IMG') {
        // 这里是需要执行的方法
        this.showImage(e.target.src);
      }
    },
    again(){
      this.$emit('again');
    },
    showImage(fileUrl){
      this.status.modalImage.isShow=true;
      this.status.modalImage.url=fileUrl;
    },
    download(fileUrl,fileName){
      let msgbody={fileUrl, fileName}
      let downloadForm = createDownloadForm(msgbody, actionUrls.URL_DOWNLOAD_FILE);
      downloadForm.submit();
    },
    emailHistoryCount(email) {
      let param = {
        "email": email,
        "sysEmail":this.sysEmail,
      };
      let self = this;
      self.$apiEmail.getEmailHistoryCount(param).then(function (response) {
        if(response.success){
          self.historyCount = response.result;
        }
        self.result=!response.success;
      });
    },
    showHistory(){
      this.status.historyEmail.isShow=true;
      this.$refs.HistoryEmail.queryEmailHistoryList(this.virtualName);
    },
  },

}
</script>

<!--css样式-->
<style  lang="less">
@import  (once,optional) "../css/base";

.div{
  margin-left:20px;
}


.content{
  width:100%;margin-top: 0.5rem;
  cursor:default ;
}

.content img{
  cursor:pointer;
}

.demo-upload-list{
  display: inline-block;
  width: 180px;
  height: 130px;
  text-align: left;
  line-height: 60px;

  overflow: hidden;
  background: #fff;
  position: relative;
  //box-shadow: 0 1px 1px rgb(107, 107, 124);
  margin-right: 4px;
}
.demo-upload-list img{
  width: 100%;
  height: auto;
}

.demo-upload-list p{
    color:#fff;
    margin-left: 0.2rem;
    line-height:28px;
    font-size:0.6rem;
    word-wrap:break-word;
    word-break:normal;
    text-align: left;
  }

.demo-upload-list-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(78, 71, 71, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
  display: block;
}
.demo-upload-list-cover i{
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  margin: 0 2px;
}

.tip_div{
  background: @tiyPrimaryLightColor;
  padding: 1rem 2rem;
  margin: 3rem 0rem;
  min-height: 10rem;

}

.file-list{
  max-width: 50rem;
  color: #130224 !important;
  margin-top:1.2rem;
  padding-left:0.8rem;
  font-weight: bold;
  font-size: 14px;
  line-height: 26px;
}
</style>
